<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="150px" :disabled="source === 'detail'">
    <el-form-item label="产品类目：" prop="businessType">
      <el-select v-model="form.businessType" clearable>
        <el-option
          v-for="item in businessTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="产品图片：" prop="productImg">
      <UploadFile :file-list="form.productImg" :limit="6" @change="uploadHandle($event, 'productImg')">
        <div slot="tip">建议尺寸：封面690*350px，小于1M的JPG/PNG/GIF格式的图片</div>
      </UploadFile>
    </el-form-item>
    <el-form-item label="产品名称：" prop="name">
      <el-input v-model="form.name" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="产品简介：">
      <el-input v-model="form.introduction" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="适用门店：" prop="siteIdSet">
      <el-select v-model="form.siteIdSet" multiple clearable>
        <el-option
          v-for="item in siteList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="购买须知：" prop="playInstructions">
      <el-input v-model="form.playInstructions" type="textarea" rows="5" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="产品详情：" prop="illustrate">
      <RichText :value.sync="form.illustrate" :disabled="source === 'detail'" />
    </el-form-item>
  </el-form>
</template>

<script>

import { getBusinessType, getAllSiteList } from '@/api/enter'
import UploadFile from '@/components/UploadFile/index.vue'
import RichText from '@/components/RichText/index.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'Step1',
  components: {
    UploadFile,
    RichText
  },
  props: {
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ])
  },
  watch: {
    formDetail(value) {
      const { businessType, productImg, name, introduction, siteIdSet, playInstructions, illustrate } = value
      this.form = {
        businessType,
        productImg,
        name,
        introduction,
        siteIdSet,
        playInstructions,
        illustrate
      }
    }
  },
  data() {
    return {
      source: '',
      businessTypeList: [],
      siteList: [],
      form: {
        businessType: '',
        productImg: '',
        name: '',
        introduction: '',
        siteIdSet: [],
        playInstructions: '',
        illustrate: ''
      },
      rules: {
        businessType: [
          { required: true, message: '请选择产品类目', trigger: ['change'] }
        ],
        productImg: [
          { required: true, message: '请上传产品图片', trigger: ['blur', 'change'] }
        ],
        name: [
          { required: true, message: '请输入产品名称', trigger: ['blur'] }
        ],
        siteIdSet: [
          { required: true, message: '请选择适用门店', trigger: ['change'] }
        ],
        playInstructions: [
          { required: true, message: '请输入购买须知', trigger: ['change'] }
        ],
        illustrate: [
          { required: true, message: '请输入产品详情', trigger: ['blur'] }
        ]
      }
    }
  },

  created() {
    const { source } = this.$route.query
    this.source = source
    this.getBusinessType()
    this.getAllSiteList()
  },

  methods: {

    // 获取业务形态
    getBusinessType() {
      const data = {
        siteId: this.currentSite.id
      }
      getBusinessType(data).then(res => {
        this.businessTypeList = res || []
      }).catch(() => {})
    },

    // 获取所有门店
    getAllSiteList() {
      getAllSiteList().then(res => {
        this.siteList = res || []
      }).catch(() => {})
    },

    // 上传图片处理
    uploadHandle(payload, name) {
      const fileList = payload.fileList
      const result = []
      fileList.map(item => {
        result.push(item.url)
      })
      this.form[name] = result.join(',')
      this.$refs.form.validateField(name)
    }

  }
}
</script>
<style lang="scss" scoped></style>
